<template>
  <div class="zong">
    <van-nav-bar title="标题" left-text="返回" right-text="..." left-arrow @click-left="onClickLeft"
      @click-right="onClickRight" />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swiper"><img :src="item" alt=""></van-swipe-item>

    </van-swipe>
    <div class="dsqu">
      <van-popover placement="bottom-end" v-model:show="showPopover" theme="dark" :actions="actions" @select="onSelect">
      </van-popover>
    </div>
    <div class="shang">
      <van-cell @click="showShare = true" />
      <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
    </div>
    <!-- <van-cell is-link @click="showPopup"></van-cell> -->
    <van-popup v-model:show="show1" position="bottom" :style="{ height: '30%' }">
      <div class="content">
        <van-card :price="swiper1.originprice" :desc="swiper1.desc
        " :thumb="swiper1.img1">
        </van-card>
        <div class="count">
          <p>
            购买数量
          </p>
          <van-stepper v-model="value" theme="round" min="1" :max="swiper1.stock" button-size="22" disable-input />
        </div>
        <van-action-bar>
          <van-action-bar-icon icon=" cart-o" text="购物车" @click="qugwc" />
          <van-action-bar-button type="warning" text="加入购物车" @click="onClickIcon1" />
          <van-action-bar-button type="danger" text="立即购买" />
        </van-action-bar>
      </div>
    </van-popup>
    <!-- 下方的加入购物车 -->
    <van-action-bar>
      <van-action-bar-icon icon="cart-o" text="购物车" @click="qugwc" />
      <van-action-bar-button type="warning" text="加入购物车" @click="onClickIcon" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup lang='ts'>
import { xqshuju } from '@/api/xqshuju';
// import { stringify } from 'querystring';
import { ref, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { jrgwc } from "@/api/jrgwc"
const router = useRouter()
const show1 = ref(false);
// 气泡弹出框
const value = ref(1);
const Route = useRoute()
const showShare = ref(false);
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '微博', icon: 'weibo' },
  { name: '复制链接', icon: 'link' },
  { name: '分享海报', icon: 'poster' },
  { name: '二维码', icon: 'qrcode' },
];
type PopoverAction = {
  text: string,
  icon: string
}

// 加入购物车
const userid: any = localStorage.getItem('userid')
const onClickIcon = () => {
  show1.value = true;

};
const onClickIcon1 = () => {
  jrgwc({ userid: userid, proid: (Route.query.id) as string, num: value.value }).then(res => {
    console.log(res);
  })
  show1.value = false;
};

const onSelect = (action: PopoverAction, index: number) => {
  console.log(55555555, index, action);
  if (index == 0) {
    router.push('/home')
  }
  else if (index == 1) {
    console.log('去购物车');
    router.push('/cart')

  } else if (action.text == '分享') {
    showShare.value = true
  }
};
const qugwc = () => {
  router.push('/cart')
}



const showPopover = ref(false);
const actions = [
  { text: '首页', icon: 'add-o' },
  { text: '购物车', icon: 'music-o' },
  { text: '分享', icon: 'more-o' },
];
const onClickLeft = () => history.back();
const onClickRight = () => { showPopover.value = true }


console.log(router);

const swiper = ref([])
let swiper1: any = reactive({})
// type xqsj ={
// let img =swiper.value.splice(6,10)
// }
// 引入详情页请求接口
onMounted(() => {
  console.log(Route.query.id);
  xqshuju({ proid: (Route.query.id) as string }).then((res: any) => {
    console.log(res);
    swiper1 = res.data
    swiper.value = res.data.banners[0].split(',')
    console.log(swiper.value);

  })
})
</script>
<style lang="scss" scoped>
.zong {
  position: relative;

  .dsqu {
    position: absolute;
    top: 12px;
    right: -2px;
    width: 1px;
    height: 1px;

  }

  .shang {
    position: absolute;
    top: -100px;
    // right: -2px;
  }
}

.count {
  display: flex;
}
</style>